<template>
    <div class="content">
        <a-card style="width: 100%;height: 100%;">
            <p>直播</p>
            <div class="liveBox">
                <!-- <a-row :gutter="16">
                    <a-col :span="4">
                            <a-card hoverable  @click="openClick" style="width:200px;">
                                <a-card-meta title="发现更多精彩内容">
                                    <template slot="description">
                                        <div class="smallBox">
                                            <a-icon type="video-camera" theme="twoTone" />
                                            点击进入
                                            <a-icon type="customer-service" theme="twoTone" two-tone-color="#FF9933"/>
                                        </div>
                                    </template>
                                </a-card-meta>
                            </a-card>
                    </a-col>
                </a-row> -->

                <div class="onlineBox">
                    <div class="topBox">
                        <h2>数字人生</h2>
                        <p>发现更多有趣的灵魂</p>
                    </div>
                    <div class="bottomBox">
                        <div class="bottomLeft">
                            
                        </div>
                        <div class="bottomRight" @click="openClick">
                            点击进入>
                        </div>
                    </div>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script>
import { getAction } from '../../api/manage'
export default {
    data() {
        return {
            userName:'admin'
        }
    },
    methods: {
        openClick() {
            this.getUserToken()
            // this.info.username = JSON.parse(localStorage.getItem('username'))
            // window.open(`http://manage.universetime.com.cn/home?username=${JSON.parse(localStorage.getItem('username'))}&auth_key=${JSON.parse(localStorage.getItem('auth_key'))}`)
            window.open(`http://meta.universetime.com.cn/home`)
        },
        getUserToken(){
            // axios({url:'http://meta.universetime.com.cn/api/accounts/login/',data:this.info,headers:{'Access-Control-Allow-Origin':'*'},method:'post'}).then(res=>{
            //     console.log(res);
            //     // localStorage.setItem('auth_key',JSON.stringify(res.data.auth_key))/
            //     // Cookies.set = `auth_key=${JSON.stringify(res.data.auth_key)}`
            //     document.cookie = `auth_key = ${JSON.stringify(res.auth_key)}`
            // })
            getAction(`/sys/getAuthKey?userName=${this.userName}`).then(res=>{
                document.cookie = `auth_key = ${JSON.stringify(res.auth_key)};domain = .universetime.com.cn ;path = /;`
                // console.log('document.cookie',document.cookie);
                // document.cookie = `auth_key = ${JSON.stringify(res.auth_key)};domain=.universetime.com.cn;path=/`
                // Cookies.set('auth_key',JSON.stringify(res.auth_key,{path:'/',domain:'.universetime.com.cn '})
            })
        },
        // 获取cookie
	    // getCookie(key) {
	    //   if (document.cookie.length > 0) {
	    //     var start = document.cookie.indexOf(key + "=");
	    //     if (start !== -1) {
	    //       start = start + key.length + 1;
	    //       var end = document.cookie.indexOf(";", start);
	    //       if (end === -1) {
	    //       	end = document.cookie.length;
	    //       	}
	    //       return unescape(document.cookie.substring(start, end));
	    //     }
	    //   }
	    //   return "";
	    // },
    },
    created(){
    }
}
</script>

<style  scoped lang="less">
.content {
    width: 100%;
    height: 250px;
}

.smallBox{
    width: 100px;
    margin: 0 auto;
}

.onlineBox{
    width: 200px;
    height: 150px;
    border: 1px solid black;
    border-radius: 10%;
    padding: 25px;
    background: url(../../assets/backgroundImg.jpeg) no-repeat;
    background-size: 100% 100%;
    color: white;
}

h2{
    color: white;
}

.bottomBox{
    margin-top: 25px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.bottomLeft{
    width: 48px;
    font-size: 12px;
    cursor: pointer;
}

.bottomRight{
    width: 70px;
    height: 20px;
    border: 1px solid white;
    text-align: center;
    background-color: #e9f0f0;
    border-radius: 6px;
    color: rgb(86, 96, 240);
    font-size: 12px;
    cursor: pointer;
}
</style>